<template>
<div>
    <div class="mui-card">
        <!--页眉，放置标题-->
        <div class="mui-card-header mui-card-media">
            <div class="mui-media-body">
                Mc骚亮爷
                <p>发表于 {{movie.meta.createdAt}}</p>
            </div>
        </div>
        <!--内容区-->
        <div class="mui-card-content">
            <img style="width:100%;" :src="movie.poster" />
        </div>
        <!--页脚，放置补充信息或支持的操作-->
        <div>
            <p>标题：{{movie.rawTitle}}</p>
            <p>评分：{{movie.rate}}</p>
            <p>类型：{{movie.movieTypes}}</p>
            <p>标签：{{movie.tags}}</p>
            <p>简介：{{movie.summary}}</p>
        </div>
    </div>
    <h3 style="text-align:left;text-indent:15px;margin-top:20px;">同类推荐</h3>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in relativeMovies" @click="godetail(item._id)">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" :src="item.poster">
                <div class="mui-media-body">
                    {{item.rawTitle}} {{item.movieTypes}}
                    <p class='mui-ellipsis'>{{item.tags}}</p>
                </div>
            </a>
        </li>
    </ul>
</div>
</template>
<script>
export default {
    data(){
        return{
            id:null,
            movie:[],
            relativeMovies:[],
        }
    },
    created(){
        console.log(this.$route)
        this.id=this.$route.params.id;
        this.getMovieDetail();

    },
    methods:{
        getMovieDetail(){
            this.$get('/api/v0/movies/'+this.id).then(res=>{
                window,scroll(0,0)
                this.movie=res.data.movie;
                this.relativeMovies=res.data.relativeMovies;
            }).catch(err=>{

            })
        },
        godetail(id){
           this.id=id;
           this.getMovieDetail();
           
        }
    },
}
</script>
<style>
.mui-card{
    margin:0;
}
</style>
